<template>
  <div class="gallery-map-tools">
    <el-tooltip v-for="item in svgList" :key="item.type" class="box-item" effect="dark" :content="item.tooltip" placement="right">
      <svg-icon :icon-class="item.url" class-name="list-box" @click="handleClick(item.type)"></svg-icon>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';

const svgList = [
  { url: '功能list-1', name: 'back-to-top', tooltip: '返回顶部', type: 'back-to-top' },
  { url: '功能list-2', name: 'zoom-in', tooltip: '放大', type: 'zoom-in' },
  { url: '功能list-3', name: 'zoom-out', tooltip: '缩小', type: 'zoom-out' },
  { url: '功能list-off', name: 'layer', tooltip: '图层', type: 'layer' },
  { url: '燃气报警流程', name: 'alarm', tooltip: '燃气报警流程', type: 'alarm' }
];
const emit = defineEmits(['back-to-top', 'zoom-in', 'zoom-out', 'layer', 'alarm']);

const handleClick = (type: string) => {
  emit(type as keyof typeof emit);
};
</script>

<style scoped>
.gallery-map-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: absolute;
  left: 27%;
  top: 120px;
  z-index: 10;
}
.list-box {
  cursor: pointer;
  font-size: 24px;
}
</style>
